<template>
  <div>
  <el-form v-loading="loading" label-position="right" label-width="100px" ref="form" :rules="rules" :model="form">
    <el-row>
      <el-col :span="10">
        <el-form-item label="处方名称:" prop="name">
           {{ info['name'] }}
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="添加人:" prop="name">
           {{ form['doctor_name'] }}
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="总价:" prop="name">
            {{ totalPrice }} 元
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="症状描述:" prop="name">
            {{ info['msg'] }}
        </el-form-item>
      </el-col>
      <el-col :span="24" style="margin-bottom: -40px;">
        <el-form-item label="处方:" prop="name">
        </el-form-item>
      </el-col>
      <div v-for="(item,index) in note" :key="index" style="padding-left: 50px;display: inline-block;padding-bottom: 10px;">
         <div style="padding-left: 50px;">
            <el-checkbox checked> {{ item.title }}</el-checkbox>
         </div>
         <el-col :span="12">
           <el-form-item label="数量:" style="margin-bottom: 0px;">
             {{ item.num }} {{ item.unit }}
           </el-form-item>
         </el-col>
         <el-col :span="12" >
           <el-form-item label="规格:" style="margin-bottom: 0px;">
              <div style="height: 33px;"> {{ item.spec }}</div>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="药品类型:" style="margin-bottom: 0px;">
             {{ item.use_type }}
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="服用方法:" style="margin-bottom: 0px;">
             {{ item.func }}
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="每次用量:" style="margin-bottom: 0px;">
             {{ item.use_num }}
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="次数" style="margin-bottom: 0px;">
             {{ item.use_times }}
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="服药时间:" style="margin-bottom: 0px;">
             {{ item.qianhou }}
           </el-form-item>
         </el-col>
      </div>

    </el-row>
    <el-form-item class="contacts-add">
      <!-- <el-button type="primary" @click="onSubmit">提交</el-button> -->
      <el-button @click="cancle">关闭</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import * as APIMedicalCare from '@/api/medicalCare';
import { mapState } from 'vuex'
import { unixToDate } from "@/utils";
export default {
  name: 'medicine-info',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {
  },
  data () {
    return {
      form: {},
      loading: false,
      ruleForm:{},
      info:{},
      note:[],
      totalPrice: 0,
      // 表单校验
      rules: {
         name: [
           { required: true,  message: '请输入处方名称', trigger: 'blur'  }
         ],
      }
    }
  },
  mounted () {
     // this.medicineGetarr()
  },
  methods: {
    getChufangInfo(id){
      const self = this;
      self.totalPrice = 0;
      APIMedicalCare.chufangInfo({ id: id }).then((resp) => {
         const res = resp.data;
         self['info'] = res;
         self['note'] = res['note'];
         res['note'].forEach(item =>{
           self.totalPrice += item['num'] * item['price']
         })
      }).finally(() => {
        this.loading = false
      });
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        if(newval.hasOwnProperty('id')){
           this.getChufangInfo(newval['id'])
           this.form = { ...newval };
        }
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
.contacts-add {
  text-align: right;
}
.contract-text {
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin: 0;
}
.contract-img {
  width: 146px;
  height: 146px;
  cursor: pointer;
}
</style>
